<script setup lang="ts">
import HomeContent from '@/components/HomeContent/index.vue'
import { useUserStore } from '@/stores'
import { reactive, watch, ref } from 'vue'
import { PutUserInfoParams } from '@/services/user/type'
import { FormInstance, FormRules } from 'element-plus'
import { putUserInfoAPI } from '@/services/user/user'

const userStore = useUserStore()

// 获取表单元素
const putUserInfoFormRef = ref<FormInstance>()

// 表单收集数据
const form = reactive<PutUserInfoParams>({
  id: userStore.userInfo?.userInfo?.id,
  nickname: userStore.userInfo?.userInfo?.nickname,
  phone: userStore.userInfo?.userInfo?.phone,
  gender: userStore.userInfo?.userInfo?.gender,
})

// 定义表单规则
const putUserInfoRules = reactive<FormRules<PutUserInfoParams>>({
  nickname: [
    { required: false },
    {
      pattern: /^[a-zA-Z\u4e00-\u9fa5][a-zA-Z0-9\u4e00-\u9fa5]{1,}$/,
      message: '昵称为不能以数字开头的起码两位字符',
      trigger: 'blur',
    },
  ],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    {
      pattern:
        /^(13\d|14[5-9]|15[0-3,5-9]|16[6]|17[0,3,5-8]|18\d|19[8,9])\d{8}$/,
      message: '手机号格式不正确',
      trigger: 'blur',
    },
  ],
})

watch(
  () => userStore.userInfo,
  (newVal) => {
    form.id = newVal.userInfo.id
    form.nickname = newVal.userInfo.nickname
    form.phone = newVal.userInfo.phone
    form.gender = newVal.userInfo.gender
  }
)

const options = [
  {
    value: '0',
    label: '男',
  },
  {
    value: '1',
    label: '女',
  },
  {
    value: '2',
    label: '保密',
  },
]

const updateConfirm = async () => {
  await putUserInfoFormRef.value?.validate()
  await putUserInfoAPI(form)
  ElMessage({
    type: 'success',
    message: '修改成功',
  })
}
</script>
<template>
  <HomeContent>
    <template #title>修改信息</template>
    <template #content>
      <el-form
        :model="form"
        ref="putUserInfoFormRef"
        class="form"
        :rules="putUserInfoRules"
        label-width="120px"
      >
        <el-form-item prop="nickname" label="昵称">
          <el-input v-model="form.nickname" class="meetingNumberInp" />
        </el-form-item>
        <el-form-item prop="phone" label="联系方式">
          <el-input v-model="form.phone" class="meetingNumberInp" />
        </el-form-item>
        <el-form-item prop="gender" label="性别">
          <el-select
            class="m-2"
            placeholder="性别"
            size="large"
            v-model="form.gender"
          >
            <el-option label="请选择性别" :value="''" />
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="formBtn" @click="updateConfirm">提交修改</el-button>
        </el-form-item>
      </el-form>
    </template>
  </HomeContent>
</template>

<style scoped lang="less">
.form {
  margin: 20px 0;
}
.meetingNumberInp {
  width: 300px;
  height: 40px;
}
.formBtn {
  width: 100px;
  background-color: #006eff;
  color: #fff;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-form-item__content) {
  justify-content: center;
  position: relative;
}
</style>
